import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Users, Shield, Key, MenuIcon } from "lucide-react"

const stats = [
  {
    title: "用户总数",
    value: "1,234",
    description: "较上月增长 +12%",
    icon: Users,
    color: "text-primary",
  },
  {
    title: "角色数量",
    value: "8",
    description: "系统角色配置",
    icon: Shield,
    color: "text-chart-3",
  },
  {
    title: "权限节点",
    value: "156",
    description: "权限控制点",
    icon: Key,
    color: "text-chart-5",
  },
  {
    title: "菜单项目",
    value: "24",
    description: "系统菜单数量",
    icon: MenuIcon,
    color: "text-chart-2",
  },
]

export default function AdminDashboard() {
  return (
    <div className="space-y-6">
      <div>
        <h2 className="text-3xl font-bold tracking-tight">仪表盘</h2>
        <p className="text-muted-foreground">欢迎使用RBAC权限管理系统</p>
      </div>

      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
        {stats.map((stat) => (
          <Card key={stat.title}>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">{stat.title}</CardTitle>
              <stat.icon className={`h-4 w-4 ${stat.color}`} />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{stat.value}</div>
              <p className="text-xs text-muted-foreground">{stat.description}</p>
            </CardContent>
          </Card>
        ))}
      </div>

      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-7">
        <Card className="col-span-4">
          <CardHeader>
            <CardTitle>系统概览</CardTitle>
          </CardHeader>
          <CardContent className="pl-2">
            <div className="space-y-4">
              <div className="flex items-center">
                <div className="w-2 h-2 bg-primary rounded-full mr-2"></div>
                <span className="text-sm">用户活跃度良好</span>
              </div>
              <div className="flex items-center">
                <div className="w-2 h-2 bg-chart-3 rounded-full mr-2"></div>
                <span className="text-sm">权限配置正常</span>
              </div>
              <div className="flex items-center">
                <div className="w-2 h-2 bg-chart-2 rounded-full mr-2"></div>
                <span className="text-sm">待审核角色: 2个</span>
              </div>
            </div>
          </CardContent>
        </Card>
        <Card className="col-span-3">
          <CardHeader>
            <CardTitle>快速操作</CardTitle>
            <CardDescription>常用管理功能</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-2">
              <div className="flex items-center p-2 rounded hover:bg-muted cursor-pointer">
                <Users className="h-4 w-4 mr-2" />
                <span className="text-sm">添加新用户</span>
              </div>
              <div className="flex items-center p-2 rounded hover:bg-muted cursor-pointer">
                <Shield className="h-4 w-4 mr-2" />
                <span className="text-sm">创建角色</span>
              </div>
              <div className="flex items-center p-2 rounded hover:bg-muted cursor-pointer">
                <Key className="h-4 w-4 mr-2" />
                <span className="text-sm">权限分配</span>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
